import {View, Text, StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// 1. 创建页面组件
// 首页组件
function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Home Scre1en</Text>
    </View>
  );
}

// 详情页组件
function DetailsScreen() {
  return (
    <View style={styles.container}>
      <Text>HomeDetailsScreen Scre1en</Text>
    </View>
  );
}

// 2. 创建堆栈导航器
const Stack = createNativeStackNavigator();

// 3. 配置路由结构
function RootStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      {/* 注册路由 - 首页 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 注册路由 - 详情页 */}
      <Stack.Screen name="Details" component={DetailsScreen} />
      {/* 来新增我们的页面！！  */}
    </Stack.Navigator>
  );
}

// 4. 应用入口组件
export default function App() {
  return (
    // 包裹在NavigationContainer中以启用导航功能
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}

// 5. 定义样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
